<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.content {
				width: 1000px;
				height: 3000px;
				background-color: pink;
				margin: 0 auto;
			}

			.backtop {
				display: none;
				width: 50px;
				left: 50%;
				margin: 0 0 0 505px;
				position: fixed;
				bottom: 60px;
				z-index: 100;
			}

			.backtop a {
				height: 50px;
				width: 50px;
				background: url(../images/20241118/bg2.png) 0 -600px no-repeat;
				opacity: 0.35;
				overflow: hidden;
				display: block;
				text-indent: -999em;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="content"></div>
		<div class="backtop">
			<img src="../images/20241118/close2.png" alt="" />
			<a href="javascript:;"></a>
		</div>
		<script>
			// 0 获取元素
			// 一. 页面滚动事件
			// 2. 页面检测滚动的距离
			window.addEventListener("scroll", () => {
				// 3. 进行判断显示和隐藏 >500
				if (document.documentElement.scrollTop > 500) {
					document.querySelector(".backtop").style.display = "block";
				} else {
					document.querySelector(".backtop").style.display = "none";
				}
			});

			// 二、点击链接返回顶部
			document.querySelector("a").addEventListener("click", () => {
				document.documentElement.scrollTop = 0;
			});
		</script>
	</body>
</html>
